<template>
  <a-form :model="admin" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="Admin ID"> {{ admin.u_id }} </a-form-item>
    <a-form-item label="Admin Name"> {{ admin.u_name }} </a-form-item>
    <a-form-item label="Admin Tel">
      {{ admin.u_tel }}
      <a-button type="primary" ghost class="mybutton" @click="showModal_1"
        >修改</a-button
      >
    </a-form-item>
    <a-form-item label="Admin Mail">
      {{ admin.u_mail }}
      <a-button type="primary" ghost class="mybutton" @click="showModal_3"
        >修改</a-button
      >
    </a-form-item>
    <a-form-item label="Admin Pawd">
      ********
      <a-button type="primary" ghost class="mybutton" @click="showModal_5"
        >修改</a-button
      >
    </a-form-item>
  </a-form>

  <div>
    <a-modal v-model:visible="visible_1" title="修改手机号" @ok="handleOk_1">
      <a-form layout="vertical" :model="codeMap">
        <a-form-item label="请输入手机验证码">
          <a-input
            v-model:value="codeMap.code"
            placeholder="input varification code"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <div>
    <a-modal v-model:visible="visible_2" title="修改手机号" @ok="handleOk_2">
      <a-form layout="vertical" :model="codeMap">
        <a-form-item label="新手机码">
          <a-input
            v-model:value="codeMap.number"
            placeholder="input a new telephone number"
          />
        </a-form-item>
        <a-form-item label="请输入手机验证码">
          <a-input-search
            v-model:value="codeMap.code"
            placeholder="input the code"
            @search="getTelVerificationCode()"
          >
            <template #enterButton>
              <a-button type="primary" v-if="tel_code" disabled
                >已获得验证码</a-button
              >
              <a-button type="primary" v-else>获得验证码</a-button>
            </template>
          </a-input-search>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <div>
    <a-modal v-model:visible="visible_3" title="修改邮箱" @ok="handleOk_3">
      <a-form layout="vertical" :model="codeMap">
        <a-form-item label="请输入邮箱验证码">
          <a-input
            v-model:value="codeMap.code"
            placeholder="input varification code"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <div>
    <a-modal v-model:visible="visible_4" title="修改邮箱" @ok="handleOk_4">
      <a-form layout="vertical" :model="codeMap">
        <a-form-item label="新邮箱">
          <a-input
            v-model:value="codeMap.number"
            placeholder="input a new mail number"
          />
        </a-form-item>
        <a-form-item label="请输入邮箱验证码">
          <a-input-search
            v-model:value="codeMap.code"
            placeholder="input the code"
            @search="getMailVerificationCode()"
          >
            <template #enterButton>
              <a-button type="primary" v-if="mail_code" disabled
                >已获得验证码</a-button
              >
              <a-button type="primary" v-else>获得验证码</a-button>
            </template>
          </a-input-search>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <div>
    <a-modal v-model:visible="visible_5" title="修改密码" @ok="handleOk_5">
      <a-form layout="vertical" :model="codeMap">
        <a-form-item label="请输入邮箱验证码">
          <a-input
            v-model:value="codeMap.code"
            placeholder="input varification code"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <div>
    <a-modal v-model:visible="visible_6" title="修改密码" @ok="handleOk_6">
      <a-form layout="vertical" :model="user">
        <a-form-item label="请输入新密码">
          <a-input
            v-model:value="user.u_pwd"
            placeholder="input new passwarf"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive, toRaw } from "vue";
import { post, setLocalToken, tip } from "@/common";

const admin = ref({
  u_id: "",
  u_name: "",
  u_tel: "",
  u_mail: "",
  u_pwd: "",
});
const visible_1 = ref(false);
const visible_2 = ref(false);
const visible_3 = ref(false);
const visible_4 = ref(false);
const visible_5 = ref(false);
const visible_6 = ref(false);

const tel_code = ref(false);
const mail_code = ref(false);

const codeMap = reactive({
  number: "",
  code: "",
});

const user = reactive({
  u_pwd: "",
});

const showModal_1 = () => {
  telcode(admin.value.u_tel);
  codeMap.number = admin.value.u_tel;
  visible_1.value = true;
};

const handleOk_1 = (e) => {
  check();
  visible_1.value = false;
  codeMap.number = "";
  codeMap.code = "";
  showModal_2();
};

const showModal_2 = () => {
  visible_2.value = true;
};

const handleOk_2 = (e) => {
  check();
  changeTel();
  codeMap.number = "";
  codeMap.code = "";
  visible_2.value = false;
};

const showModal_3 = () => {
  mailcode(admin.value.u_mail);
  codeMap.number = admin.value.u_mail;
  visible_3.value = true;
};

const handleOk_3 = (e) => {
  check();
  visible_3.value = false;
  codeMap.number = "";
  codeMap.code = "";
  showModal_4();
};

const showModal_4 = () => {
  visible_4.value = true;
};

const handleOk_4 = (e) => {
  check();
  changeMail();
  codeMap.number = "";
  codeMap.code = "";
  visible_4.value = false;
};

const showModal_5 = () => {
  //   telcode(admin.value.u_tel);
  //   codeMap.number = admin.value.u_tel;
  mailcode(admin.value.u_mail);
  codeMap.number = admin.value.u_mail;
  visible_5.value = true;
};

const handleOk_5 = (e) => {
  check();
  visible_5.value = false;
  codeMap.number = "";
  codeMap.code = "";
  showModal_6();
};

const showModal_6 = () => {
  visible_6.value = true;
};

const handleOk_6 = (e) => {
  updatePwd();
  user.u_pwd = "";
  visible_6.value = false;
};

const getinfo = () => {
  post("/admin/info").then((res) => {
    admin.value = res.data;
  });
};

const telcode = (u_tel) => {
  post("/admin/login/getTelVerificationCode/" + u_tel).then((res) => {
    tip.success("已发送手机验证码");
  });
};

const mailcode = (u_mail) => {
  post("/admin/login/getMailVerificationCode/" + u_mail).then((res) => {
    tip.success("已发送邮箱验证码");
  });
};

const check = () => {
  post("/admin/info/checkUpdate", codeMap).then((res) => {
    tip.success("验证码正确");
    mail_code.value = false;
    tel_code.value = false;
  });
};

const getTelVerificationCode = () => {
  if (tel_code == true) return;
  post("/admin/info/getTelVerificationCode/" + codeMap.number).then((res) => {
    tel_code.value = true;
  });
};

const getMailVerificationCode = () => {
  if (mail_code == true) return;
  post("/admin/info/getMailVerificationCode/" + codeMap.number).then((res) => {
    mail_code.value = true;
  });
};

const changeTel = () => {
  post("/admin/info/updateTel/" + codeMap.number).then((res) => {
    tip.success("更换手机号成功！");
    getinfo();
  });
};

const changeMail = () => {
  post("/admin/info/updateMail/" + codeMap.number).then((res) => {
    tip.success("更换邮箱成功！");
    getinfo();
  });
};

const updatePwd = () => {
  post("/admin/info/updatePwd", user).then((res) => {
    tip.success("更换密码成功！");
    getinfo();
  });
};

getinfo();

const labelCol = ref({
  span: 6,
});
const wrapperCol = ref({
  span: 7,
});
</script>

<style scoped>
.mybutton {
  float: right;
}

.fontsize {
  font-size: large;
}
</style>